<template>
  <div class="import-file-container">
    <el-form size="small">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-download"
          @click="downloadTemplate">
          下载模板
        </el-button>
        <el-button
          @click="cancel">
          取 消
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          drag
          ref="uploadFile"
          :headers="form.headers"
          :data="form.data"
          :before-upload="beforeUpload"
          :action="form.action"
          :accept="form.accept"
          :on-exceed="onExceed"
          :on-success="onSuccess"
          :on-error="onError"
          :limit="form.limit">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em> 点击上传</em></div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "importFile",
  props: {
    form: {
      type: Object,
      default: {
        data: {},
        action: "",
        headers: {},
        accept: "",
        limit: 1
      }
    }
  },
  methods: {
    onExceed() {
      this.$refs.uploadFile.clearFiles();
    },
    onSuccess(response) {
      this.$emit("close", response);
      this.$refs.uploadFile.clearFiles();
    },
    onError(response) {
      this.$emit("close", response);
      this.$refs.uploadFile.clearFiles();
    },
    downloadTemplate() {
      this.$emit("exportTemplate")
    },
    cancel() {
      this.$refs.uploadFile.clearFiles();
      this.$emit("close");
    },
    beforeUpload() {
    }
  }
}
</script>

<style scoped>

</style>
